<template>
	<view class="content">
		<view class="company">
			<view class="companyLogo">
				<u--image width="100rpx" height="100rpx" :src="systemInfo.logo"></u--image>
			</view>
			<view class="companyName">欢迎使用{{systemInfo.name}}</view>
		</view>
		<view class="login">
			<!-- #ifndef MP-WEIXIN -->
			<view class="loginTip">
				<view>请输入您的手机号码，</view>
				<view>登录或者注册您的账号</view>
			</view>
			<view class="loginFrom">
				<view>账号</view>
				<view>
					<u--input
					    placeholder="请输入手机号"
					    border="bottom"
					    clearable
						v-model="mobile"
					  ></u--input>
				</view>
				<view class="invitation">邀请码</view>
				<view>
					<u--input
					    placeholder="请输入邀请码"
					    border="bottom"
					    clearable
						v-model="invitation"
					  ></u--input>
				</view>
				<view style="margin-top: 20rpx;">
				验证码	
				</view>
				<view>

					<u-input placeholder="验证码" v-model="captcha" border="bottom">

						<template slot="suffix">
							<u-code
								ref="uCode"
								@change="codeChange"
								seconds="120"
								changeText="X秒重新获取"
							></u-code>
							<u-button
								@tap="getCode"
								:text="tips"
								type="success"
								size="mini"
								shap="circle"
							></u-button>
						</template>

					</u-input>

				</view>
			</view>
			<view class="flex article">
				<view style="margin-left: 20rpx;">
					<u-checkbox-group
						v-model="checkboxValue1"
						placement="column"
						
					>
						<u-checkbox
							:customStyle="{marginBottom: '8px'}"
							v-for="(item, index) in checkboxList1"
							:key="index"
							:label="item.name"
							:name="item.name"
						>
						</u-checkbox>
					</u-checkbox-group>
				</view>
				<view class="flex">
					<view>阅读并同意</view>
					<view class="articleTitle" @click="userArticle">
						用户协议
					</view>
					<view>和</view>
					<view class="articleTitle" @click="zenArticle">隐私协议</view>
				</view>
			</view>
			<view class="goLogin" @click="goLogin">开始</view>
			<!-- #endif -->
			<!-- #ifdef MP-WEIXIN -->
			<view class="mpLogin">
				<button class="mpLoginButton" type="success" style="margin-top: 45rpx;" open-type="getPhoneNumber" @getphonenumber="miniProgramLogin" >手机号一键登录</button>
			</view>
			<!-- #endif -->
		</view>
		
		
		<u-popup :show="show" mode="center"  @close="confirmRead" @open="">
				<view class="flex alPopup">
					<view class="buyerTitle">协议</view>
					<view v-html="articleContent"  style="height: 1000rpx;overflow-y: auto;"></view>
					<view class="sureBtn" @click="sureBtn">确定</view>
				</view>
		</u-popup>
	</view>
</template>

<script>
	import http from '@/apis/http.js'
	export default {
		data() {
			return {
				systemInfo : {},
				invitation:'',
				tips: '',
				value: '',
				decodePhoneParams : {},
				mobile:'',
				captcha:'',
				show:false,
				articleContent : '',
				checkboxValue1:[],
				checkboxList1: [{
						name: '',
					},
				],
			}
		},
		methods: {
			confirmRead(){
				this.show = false;
			},
			sureBtn(){
				this.show = false;
			},
			userArticle(){
				this.show = true;
			},
			zenArticle(){
				this.show = true;
			},
			getSystemInfo (){
				http.POST('index/systemInfo').then(res=>{
					this.systemInfo = res.data
				})
			},
		  getCode() {
			  if(this.mobile.length <= 0){
				uni.$u.toast('请填写手机号');
				return;
			  }
			if (this.$refs.uCode.canGetCode) {
			  // 模拟向后端请求验证码
			  uni.showLoading({
				title: '正在获取验证码'
			  })
			  
			  http.POST('user/sendSms',{mobile:this.mobile}).then(res=>{
				  uni.hideLoading();
				  if(res.code == 1){
					  uni.$u.toast('验证码已发送');
				  }else{
					  uni.$u.toast('发送失败');
				  }
			  })
			  this.$refs.uCode.start();
	
			} else {
			  uni.$u.toast('倒计时结束后再发送');
			}
		  },
			change(e) {
				console.log('change', e);
			},
			codeChange(text) {
			  this.tips = text;
			},
			miniProgramLogin(e){
				var that = this;
				// if(this.checkboxValue1.length < 1){
				// 	uni.showToast({
				// 		title:'请勾选协议',
				// 		icon:'none'
				// 	})
				// 	return
				// }
				let code = e.detail.code;
				if(!code){
					uni.showToast({
						icon:'none',
						title:'获取手机号失败'
					})
					return false;
				}
				http.POST('mini_program/getMobile',{code:code})
					.then(resMobile => {
		
							if(resMobile.code == 1){
								uni.login({
								  provider: 'weixin',
								  success: function (loginRes) {
									if(loginRes.code){
										
										http.POST('mini_program/getUserInfo',{code:loginRes.code}).then(res=>{
											if(res.code == 1){
												console.log(that.invitation,this.invitation)
												http.POST('user/miniProgramLogin',{mobile:resMobile.data,openid:res.data,invitation:that.invitation}).then(res=>{
													if(res.code == 1){
														uni.setStorageSync('userinfo',res.data.userinfo);
														uni.setStorageSync('token',res.data.userinfo.token);
														uni.reLaunch({
															url:'/pages/my/user'
														})
													}else{
														uni.showToast({
															title:'登录失败',
															icon:'none'
														})
													}
												})
											}else{
												uni.showToast({
													title:'登录失败',
													icon:'none'
												})
											}
										})
									}else{
										uni.showToast({
											title:'登录失败',
											icon:'none'
										})
									}
								  }
								});
							}
					})
					.catch(err => {
							console.log(err);
					});
			},
			// 手机号 短信登录
			goLogin(){
				if(this.checkboxValue1.length < 1){
					uni.showToast({
						title:'请勾选协议',
						icon:'none'
					})
					return
				}
				http.POST('user/mobilelogin',{mobile:this.mobile,invitation:this.invitation,captcha:this.captcha}).then(res=>{
					if(res.code == 1){
						uni.setStorageSync('userinfo',res.data.userinfo);
						uni.setStorageSync('token',res.data.userinfo.token);
						uni.reLaunch({
							url:'/pages/my/user'
						})
					}else{
						uni.showToast({
							title:'登录失败',
							icon:'none'
						})
					}
				})
			}
		},
		created() {

			
		},
		onLoad(option) {
			if(option.invitation){
				this.invitation = option.invitation
			}else if(uni.getStorageSync('invitation')){
				this.invitation = uni.getStorageSync('invitation')
			}
			this.getSystemInfo()
		}
	}
</script>

<style>
	.flex{display: flex;}
	.content {
		/* #ifndef MP-WEIXIN */
		height: 1000rpx;
		/* #endif */
		/* #ifdef MP-WEIXIN */
		height: 2000rpx;
		/* #endif */

		padding: 0 40rpx;
		background: url('@/static/image/loginbg.jpg') no-repeat top/100%;
		background-color:#f0f3f8;
	}
	.company { 
		padding: 200rpx 50rpx 0 50rpx;
		
	}
	.companyName{font-size: 28rpx; color: #fff; font-weight: bold; margin-top: 20rpx;}
	.login {
		background: linear-gradient(180deg,#ccdcfe,#fff 75%);
		margin-top:50rpx;
		border-radius: 40rpx;
		width: 95%;
		/* #ifndef MP-WEIXIN */
		height: 1000rpx;
		/* #endif */
		
		/* #ifdef MP-WEIXIN */
		height: 230rpx;
		/* #endif */
		padding: 40rpx 0 0 30rpx;
	}
	.loginTip {
		margin-top: 40rpx;
		margin-bottom: 50rpx;
		font-weight: bold;
		font-size: 40rpx;
	}
	.invitation{margin-top:20rpx;}
	.goLogin {
		width: 90%;
		background: #5cb9a4;
		padding: 20rpx;
		color: #fff;
		border-radius: 50rpx;
		text-align: center;
		margin: 20rpx 0;
	}
	.article { font-size: 25rpx; text-align: center; margin: 30rpx 0 0 30rpx; }
	.articleTitle {color: #4fc0ec;}
	.alPopup {  flex-direction: column; padding: 20rpx; width: 600rpx; justify-content: center;}
	.alPopup .buyerTitle { font-weight: bold; text-align: center; margin-bottom: 20rpx; }
	.alPopup .sureBtn {
		text-align: center;
		color: blue;
		padding: 15rpx 0;
		margin-top: 20rpx;
	}
	.mpLogin {
		width: 90%;
		background: #5cb9a4;
		padding: 0 20rpx;
		color: #fff;
		border-radius: 50rpx;
		text-align: center;
		margin: 20rpx 0;
	}
	.mpLoginButton { background-color: transparent !important; border: none !important; color: #fff; }
	button::after {
	  border: none !important;
	  background-color: transparent !important;
	}

</style>
